<template>
	<view class="login-page">
		<u-navbar placeholder leftIconSize="0" bgColor="transparent"></u-navbar>

		<view class="top-box">
			<image class="image" :src="logo" mode="aspectFill"></image>
			<view class="label">欢迎登录</view>
		</view>
		
		<view class="container">
			<view class="btn-box">
				<button class="weixin-login" v-if="!protocol" @click="protocolToast">一键授权登录</button>
				<block v-else>
					<button class="weixin-login" v-if="loginData.code && loginData.data.is_binding === 1" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键授权登录</button>
					<button class="weixin-login" v-else-if="loginData.code && loginData.data.is_set === 1" @click="showUserData">一键授权登录</button>
					<button class="weixin-login" v-else @click="loginToast">一键授权登录</button>
				</block>
				
				<button class="no-login" @click="goIndex">暂不登录</button>
			</view>
		</view>

		<view class="protocol-radio" :class="{ 'active': protocol }" @click="protocol = !protocol">
			<view class="checkbox"></view>
			<view class="text">
				<text>我已阅读并同意</text>
				<text class="link" @click.stop="goProtocol(2)">《用户协议》</text>
				<text>与</text>
				<text class="link" @click.stop="goProtocol(1)">《隐私条款》</text>
			</view>
		</view>
		
		<u-popup :show="userShow" mode="center" round="20rpx" :safeAreaInsetBottom="false" :closeOnClickOverlay="false">
			<view class="user-popup">
				<view class="title-box">请填写您的信息</view>
				<view class="content-box">
					<form @submit="userSubmit">
						<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="chooseavatar">
							<view class="image-box">
								<u--image :src="avatar" width="120rpx" height="120rpx" shape="circle"></u--image>
							</view>
							<view class="label">点击设置头像</view>
						</button>
						<input class="input" type="nickname" name="name" placeholder="请输入昵称"/>
						<button class="btn" form-type="submit">确认</button>
					</form>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { uploadURL } from '@/api/config.js'
	import { getConfig, wxappLogin, getWxMobile, bindPhone, changeUserInfo } from '@/api/api'

	export default {
		data () {
			return {
				logo: '',

				form: {
					mobile: '',
					code: '',
					type: 2
				},

				protocol: false,
				
				/* 获取验证码 */
				tips: '',
				codeDisabled: false,

				/* 微信登录数据 */
				loginData: {},
				
				/* 邀请码 */
				regcode: '',

				userShow: false,
				avatar: '',
				userForm: {
					avatar: '',
					name: '',
				}
			}
		},
		onLoad (options) {
			this.regcode = options.regcode || ''
			if (this.regcode === '') {
				this.regcode = uni.getStorageSync('regcode') || ''
				uni.removeStorageSync('regcode')
			}

			getConfig().then(res => {
				this.logo = res.data.web_site_logo
			})
			
			this.wxLogin()
		},
		methods: {
			/* 微信授权登录 */
			wxLogin () {
				uni.showLoading({ mask: true })
				uni.login({
					success: (res) => {
						let form = {
							code: res.code
						}
						if (this.regcode) {
							form.regcode = this.regcode
						}
						
						wxappLogin(form).then(res => {
							uni.hideLoading({ noConflict: true })
							if (res) {
								this.loginData = res
								
								uni.setStorageSync('token', res.data.token.access_token)
								uni.setStorageSync('userId', res.data.member.id)
							}
						})
					},
					fail: (err) => {
						console.log('login fail', err);
					}
				})
			},
			getPhoneNumber (e) {
				if (!e.detail.code) {
					return
				}
				
				uni.showLoading({ mask: true })

				getWxMobile({
					code: e.detail.code
				}, {
					custom: { token: this.loginData.data.token.access_token } ,
				}).then(res => {
					uni.hideLoading({ noConflict: true })

					if (res) {
						uni.showLoading({ mask: true })
						bindPhone({
							openid_xcx: this.loginData.data.openid,
							mobile: res['0'].phoneNumber,
							avatar: '',
							name: '',
						}, {
							custom: { token: this.loginData.data.token.access_token } ,
						}).then(bRes => {
							uni.hideLoading({ noConflict: true })
							if (bRes) {
								this.loginData.data.token = bRes.data.token
								if (this.loginData.data.is_set === 1) {
									this.userShow = true
								} else {
									uni.showToast({
										title: bRes.msg,
										mask: true
									})
									uni.setStorageSync('token', this.loginData.data.token.access_token)
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}, 200)
								}
							}
						})
					}
				})
			},
			showUserData () {
				this.userShow = true
			},
			chooseavatar (e) {
				uni.showLoading({ mask: true })
			
				console.log(e.detail.avatarUrl, uploadURL);
				uni.uploadFile({
					url: uploadURL,
					filePath: e.detail.avatarUrl,
					name: 'img',
					success: (fileRes) => {
						uni.hideLoading({ noConflict: true })
						const data = JSON.parse(fileRes.data)
						if (data.code == 1) {
							this.avatar = data.path
							this.userForm.avatar = data.id
						} else {
							uni.showToast({
								icon: 'error',
								title: data.msg
							})
						}
					},
					fail: (fileErr) => {
						console.log('fileErr', fileErr);
						uni.hideLoading({ noConflict: true })
						uni.showToast({
							icon: 'error',
							title: '上传失败'
						})
					}
				})
			},
			userSubmit (e) {
				if (!this.userForm.avatar) {
					uni.showToast({
						title: '请选择头像',
						icon: 'none'
					})
					return
				}
				
				if (!e.detail.value.name) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
					return
				}
				
				this.userForm.name = e.detail.value.name
				
				uni.showLoading({ mask: true })
				changeUserInfo(this.userForm, {
					custom: { token: this.loginData.data.token.access_token } ,
				}).then(res => {
					if (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						uni.setStorageSync('token', this.loginData.data.token.access_token)
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 200)
					}
				})
			},
			loginToast () {
				if (this.loginData.code === 1) {
					uni.setStorageSync('token', this.loginData.data.token.access_token)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 200)
				} else {
					uni.showToast({
						title: this.loginData.msg,
						icon: 'error'
					})
					setTimeout(() => {
						this.wxLogin()
					}, 1000)
				}
			},
			protocolToast () {
				uni.showToast({
					title: '请阅读并同意协议',
					icon: 'none'
				})
			},
			goProtocol (type) {
				uni.navigateTo({
					url: '/pages/login/protocol?type=' + type
				})
			},
			goIndex () {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
.login-page {
	position: relative;
	min-height: 100%;
	background-color: $bg-color;
	.page-top {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		filter: blur(20px);
		.bg {
			width: 750rpx;
		}
		.mask {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 60rpx;
			background-image: linear-gradient(0deg, #f1f7ff, rgba($color: #f1f7ff, $alpha: 0));
		}
	}
	.top-box {
		height: 332rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 4;
		.image {
			width: 134rpx;
			height: 134rpx;
			border-radius: 50%;
		}
		.label {
			margin-top: 40rpx;
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.container {
		padding: 32rpx 52rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 50%;
		z-index: 4;
		transform: translateY(-50%);
	}
	.btn-box {
		.weixin-login {
			border-radius: 88rpx;
			height: 88rpx;
			color: #fff;
			font-size: 32rpx;
			line-height: 88rpx;
			background-color: $primary-color;
			box-shadow: 0 0 24rpx rgba($color: $primary-color, $alpha: 0.2);
		}
	}
	.no-login {
		margin-top: 20rpx;
		height: 88rpx;
		color: #666;
		font-size: 32rpx;
		line-height: 88rpx;
		background-color: transparent;
	}
	.protocol-radio {
		position: fixed;
		left: 32rpx;
		right: 32rpx;
		bottom: 80rpx;
		z-index: 6;
		display: flex;
		justify-content: center;
		.text {
			flex: none;
		}
	}
	.user-popup {
		width: 660rpx;
		.title-box {
			height: 88rpx;
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			line-height: 88rpx;
			border-bottom: 1rpx solid #eee;
		}
		.content-box {
			padding: 32rpx;
			.avatar-btn {
				margin: 0;
				padding: 0;
				line-height: inherit;
				background: transparent;
				.image-box {
					margin: 0 auto;
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					background-color: #eee;
				}
				.label {
					margin-top: 8rpx;
					color: #666;
					font-size: 28rpx;
				}
			}
			.input {
				margin-top: 28rpx;
				padding: 0 28rpx;
				border-radius: 12rpx;
				height: 80rpx;
				color: #000;
				font-size: 28rpx;
				line-height: 80rpx;
				background-color: #efefef !important;
			}
			.btn {
				margin-top: 28rpx;
				border-radius: 88rpx;
				height: 88rpx;
				color: #fff;
				font-size: 32rpx;
				line-height: 88rpx;
				background-color: $primary-color;
				box-shadow: 0 0 24rpx rgba($color: $primary-color, $alpha: 0.2);
			}
		}
	}
}
</style>
